<template>
	<view class="login-container">
		<view class="login-box">
			<view class="login-title">AI助手</view>
			<uni-easyinput v-model="username" placeholder="用户名:admin" prefixIcon="person" />
			<uni-easyinput v-model="password" placeholder="密码:123456" type="password" prefixIcon="locked" />
			<button class="login-button" @click="login">登录</button>
			<view class="register-link" @click="goToRegister">还没有账号？立即注册</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: ''
		};
	},
	methods: {
		login() {
			if (this.username.trim() === '' || this.password.trim() === '') {
				uni.showToast({
					title: '用户名和密码不能为空',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			// 模拟登录验证
			if (this.username === '1' && this.password === '1') {
				uni.showToast({
					title: '登录成功',
					icon: 'success',
					duration: 1000
				});
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 1000);
			} else {
				uni.showToast({
					title: '用户名或密码错误',
					icon: 'none',
					duration: 2000
				});
			}
		},
		goToRegister() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		}
	}
}
</script>

<style>
.login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
	background-color: #f5f7fa;
	overflow: hidden;
}

.login-box {
	width: 80%;
	max-width: 400px;
	padding: 30px;
	background-color: #ffffff;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	animation: fadeInUp 1s ease-in-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.login-title {
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
	color: #333;
}

.uni-easyinput {
	margin-bottom: 20px;
}

.login-button {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 25px;
	background-color: #007aff;
	color: white;
	font-size: 16px;
	cursor: pointer;
	margin-bottom: 10px;
	transition: background-color 0.3s;
}

.login-button:hover {
	background-color: #0056b3;
}

.register-link {
	text-align: center;
	color: #007aff;
	font-size: 14px;
	cursor: pointer;
	transition: color 0.3s;
}

.register-link:hover {
	text-decoration: underline;
	color: #0056b3;
}
</style>